<template>
  <div>
    <el-row :gutter="32">
      <el-col :lg="7">
        <div class="ml20 mt50 classflex-space-between mb20">
          <div>
            <div class="text-black text-size-20" style="font-weight: 700;">班级管理</div>
          </div>
          <div class="mr10">
            <el-button type="primary" @click="add">创建班级</el-button>
          </div>
        </div>


        <div class=" wrapper mt20 ml20  ">
          <!-- courseList -->
          <el-collapse v-model="activeNames" @change="handleChange" class="text-green">
            <el-collapse-item v-for="(item, index) in courseList" :key="item.id" :title="item.value"
              :name="item.courseName">

              <div v-if="item.children==null"  class="classflex-center" >暂无数据</div>

              <div v-else class="itemright hovercolor stylecard" v-for="(itemchildren, index) in item.children"
                :key="itemchildren.id" @click="GetMessage(index,itemchildren)"
                :class="selectedIndex == itemchildren.id ? 'changecolor':''">



                <div class="  classflex-left mb20 pd20 mt10">

                  <div>
                    <img src="@/assets/touxiang.png" alt="">
                  </div>
                  <div class="ml20">
                    <div class="text-black text-size-20   " style="font-weight: 700;"
                      :class="selectedIndex == itemchildren.id  ? 'text-green':''">{{itemchildren.className}} </div>
                    <div class="text-gray text-size-14  mt20 ">共{{GetNumber(itemchildren)}} 名学员</div>
                  </div>
                </div>

              </div>


            </el-collapse-item>
          </el-collapse>



        </div>

      </el-col>
      <el-col :lg="10">
        <div class="" v-if="rightshow">
          <div class="ml20 mt50 classflex-end">
            <div>
              <el-button type="primary" @click="addscheduling">新增课表</el-button>
            </div>
            <div class="ml30">
              <el-button type="primary" @click="adjustscheduling">调整课表</el-button>

            </div>
          </div>



          <!-- <el-calendar v-model="value">
          </el-calendar> -->
          <div class="ml20">

            <el-calendar v-model="calendardata">
              <template slot="dateCell" slot-scope="{date, data}">


                <br />
                <div class="text-black classflex-center">
                  {{ data.day.split('-').slice(2).join('-') }}
                </div>
                <div class="text-green classflex-center mt10">
                  {{my_date(data.day)}}
                </div>


              </template>
            </el-calendar>




            <div class="grid-content bg-purple-dark    text-size-23-w700 ml10 "> {{result_numberall}}
              {{formatDate2(calendardata)}} {{week_day}}
            </div>
          </div>
          <div class="content ml20">

            <el-empty :image-size="300" v-if="schedulingList.length==0"></el-empty>
            <el-card class="itemleftnow" v-else v-for="item in schedulingList" :key="item.id">
              <div @click="tonow(item)">
                <div class="classflex-space-between">
                  <div>
                    <div class="classflex-left">
                      <div class=" text-size-30 text-lv "><i
                          class="el-icon-alarm-clock "></i>{{item.classStart}}-{{item.classStart}}</div>
                      <div class=" text-size-16 text-gray ml20 ">{{item.classHours}}课时</div>
                    </div>

                    <div class=" text-size-14 text-gray  mt10 hovertext mt20"><i
                        class="el-icon-s-fold mr10"></i>班级：{{item.className||"默认班级"}}/{{item.classCourse}}
                    </div>
                    <div class=" text-size-14 text-gray mt10 hovertext mt20"><i
                        class="el-icon-user mr10"></i>教师：{{item.classTeacher}} ·学员：{{item.classStudent||"0" }}人
                    </div>
                  </div>


                </div>
              </div>
            </el-card>
          </div>





        </div>




      </el-col>

      <el-col :span="6" v-if="rightshow">
        <div class="mt50">
          <div class="text-black text-size-20" style="font-weight: 700;">班级学员</div>
        </div>


        <div class="mr30 classflex-end">
          <el-button type="primary" @click="AddStudentList">添加学员</el-button>
          <el-button v-if="nowschoolclass.studentlist!=null&&nowschoolclass.studentlist.length>0&&removestep==1"
            type="primary" @click="RemoveStudentList" class="ml20">
            移除学员</el-button>
          <el-button v-if="removestep==2" type="primary" @click="RemoveStudentList" class="ml20">
            确认删除</el-button>
          <el-button v-if="removestep==2" type="primary" @click="cancelremovestep" class="ml20">
            取消</el-button>
        </div>

        <div class="mt20">

          <div v-if="nowschoolclass.classStudent==null" class="text-gray text-size-17 mt30 ml20"
            style="font-weight: 700;">暂无班级学员</div>

          <div v-else class="itemright hovercolor stylecard" v-for="(item, index) in nowschoolclass.studentlist"
            :key="item.id" @click="GetStudent(index,item)">


            <!-- {{item}} -->
            <div class="  classflex-left mb20 pd20 mt10">
              <div class="" v-if="checkboxshow">
                <el-checkbox v-model="item.checked" label=""> </el-checkbox>
              </div>
              <div>
                <img src="@/assets/touxiang.png" alt="">
              </div>
              <div class="ml20">
                <div class="text-black text-size-20   " style="font-weight: 700;">{{item.userName}} </div>
                <div class="text-gray text-size-14  mt20 ">剩余{{item.remainingClassHours}}节课</div>
              </div>
            </div>

          </div>
        </div>
        <div>
          <div class="text-black text-size-20 mt30 ml20" style="font-weight: 700;">班级设置</div>
        </div>
        <div class="mt20">

          <div class=" classflex-space-between  ml20">
            <div class="  text-gray text-size-16  ">班级名称</div>

            <div class="text-black text-size-16    mr80">{{nowschoolclass.className}}</div>

          </div>
          <el-divider></el-divider>
          <div class=" classflex-space-between  ml20 mt30">
            <div class="  text-gray text-size-16  ">关联课程</div>
            <div class="text-black text-size-16    mr80">{{nowschoolclass.classCourse}}</div>

          </div>
          <el-divider></el-divider>
          <div class=" classflex-space-between  ml20 mt30">
            <div class="  text-gray text-size-16  ">班级容量</div>

            <div class="text-black text-size-16    mr80">{{nowschoolclass.classCapacity}}</div>

          </div>
          <el-divider></el-divider>
          <div class=" classflex-space-between  ml20 mt30">
            <div class="  text-gray text-size-16  ">请假默认计课时</div>

            <div class="text-black text-size-16    mr80">
              <el-switch v-model="nowschoolclass.classAskforleave" active-color="#13ce66" inactive-color="#ff4949"
                active-value="1" inactive-value="0" @change="changclassAskforleave">
              </el-switch>
            </div>

          </div>
          <el-divider></el-divider>
          <div class=" classflex-space-between  ml20 mt30">
            <div class="  text-gray text-size-16  ">未到默认计课时</div>
            <div class="text-black text-size-16    mr80">

              <el-switch v-model="nowschoolclass.classNoyet" active-color="#13ce66" inactive-color="#ff4949"
                active-value="1" inactive-value="0" @change="changclassclassNoyet">
              </el-switch>
            </div>

          </div>
          <el-divider></el-divider>
          <div class="mt20 classflex-center">
            <el-button type="primary" icon="el-icon-search" style="width: 100%;" @click="ChangeSchedulingDrawer">默认排课设置
            </el-button>
          </div>
          <div class="mt20 classflex-center">
            <el-button type="primary" icon="el-icon-search" style="width: 100%;"
              @click="handleDelete(nowschoolclass.id)">删除班级</el-button>
          </div>
        </div>

      </el-col>

    </el-row>


    <add-schoolclass-drawer class="" ref="SchoolclassDrawer" @AddSchoolclassDrawer="AddSchoolclassDrawerSucccess">

    </add-schoolclass-drawer>

    <add-scheduling-drawer class="" ref="SchedulingDrawer">

    </add-scheduling-drawer>

    <add-studentlist-drawer class="" ref="StudentlistDrawer" @AddStudentlistDrawerSuccess="AddStudentlistDrawerSuccess">

    </add-studentlist-drawer>

    <change-scheduling-drawer class="" ref="ChangeSchedulingDrawer">

    </change-scheduling-drawer>

    <!-- {{courseList}} -->

  </div>
</template>

<script>
  import AddSchoolclassDrawer from '@/components/AddSchoolclassDrawer'
  import AddSchedulingDrawer from '@/components/AddSchedulingDrawer'
  import AddStudentlistDrawer from '@/components/AddStudentlistDrawer'
  import ChangeSchedulingDrawer from '@/components/ChangeSchedulingDrawer'


  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";
  import {
    listCourse_And_Class,
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";



  import {
    calculateDaysAfter,
    calculateDaysBetween
  } from "@/utils/ruoyi";
  import {
    schedulingtablelist,
    listScheduling,
    getScheduling,
    delScheduling,
    addScheduling,
    updateScheduling
  } from "@/api/scheduling/scheduling";

  export default {
    name: "Schoolclass",
    components: {
      AddSchoolclassDrawer,
      AddSchedulingDrawer,
      AddStudentlistDrawer,
      ChangeSchedulingDrawer

    },
    dicts: ['class_circulate'],

    data() {
      return {
        queryParamsSchedulingtablelist: {
          year: null,
          month: null,

        },
        result_numberall: "",
        week_day: "",
        calendardata: new Date(),
        // value: new Date(),
        selectedIndex: 0,
        jj: "",
        checkboxshow: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 班级表格数据
        schoolclassList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        // open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        queryParamsScheduling: {
          pageNum: 1,
          pageSize: 10,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},
        checked: false,
        // 表单校验
        rules: {},
        rightshow: false,
        nowschoolclass: {},
        queryParamsCourse: {},
        courseList: [],

        // 课程表表格数据
        schedulingList: [],
        getschedulingtablelist: [],
        activeNames: [],
        formschoolclass: {},
        formupdateSchoolclass: {},
        removestep: 1,
        removedisable: false,
      };
    },
    watch: {


      'nowschoolclass.studentlist': {
        handler() {
          console.log("zzz");
          // const newfilter = this.nowschoolclass.studentlist.filter(item => item.checked == true);
          // const idArray = [];
          // for (let i = 0; i < newfilter.length; i++) {
          //   idArray.push(newfilter[i].id);
          // }
          // if(idArray.length>0){
          //   this. removedisable=true;

          // }else{
          //      this. removedisable=false;
          // }

        },
        deep: true

      },

      'calendardata': {
        handler() {
          this.startnow();
          console.log("变化了:" + this.calendardata);
          // 获取当前的年份
          var year = this.calendardata.getFullYear();

          // 获取当前的月份（注意月份从0开始计数）
          var month = this.calendardata.getMonth() + 1; // 需要加上1才能得到正确的月份值
          this.queryParamsSchedulingtablelist.year = year;
          this.queryParamsSchedulingtablelist.month = month;
          console.log("变化了:" + year);
          console.log("变化了:" + month);


          //获取课程表列表
          this.queryParamsSchedulingtablelist.classCourse = this.nowschoolclass.classCourse;
          this.queryParamsSchedulingtablelist.className = this.nowschoolclass.className;
          //设置排课
          this.queryParamsScheduling.classCourse =  this.nowschoolclass.classCourse;
          this.queryParamsScheduling.className =  this.nowschoolclass.className;
          this.getSchedulingtablelistCount();
          this.getSchedulingList();
        }
      },
    },
    created() {


      this.getCourseList();
      // 可以使用JavaScript中的Date对象来获取当前的年份和月份。

      // 创建一个新的日期对象
      var date = new Date();

      // 获取当前的年份
      var year = date.getFullYear();

      // 获取当前的月份（注意月份从0开始计数）
      var month = date.getMonth() + 1; // 需要加上1才能得到正确的月份值
      this.queryParamsSchedulingtablelist.year = year;
      this.queryParamsSchedulingtablelist.month = month;
      //获取课程表列表
      this.getSchedulingtablelistCount();
      this.startnow();





    },
    methods: {
      AddStudentlistDrawerSuccess() {
        console.log( this.formupdateSchoolclass.id);

        getSchoolclass(this.formupdateSchoolclass.id).then(response => {
          this.nowschoolclass = response.data;
          this.checkboxshow = false;
          this.removestep = 1;
          console.log(this.nowschoolclass);
        });
      },
      cancelremovestep() {
        this.removestep = 1;
        this.checkboxshow = false;

      },
      RemoveStudentList() {
        if (this.removestep == 1) {
          //第一步变颜色
          this.checkboxshow = true;
          this.removedisable = true;
          // console.log(this.removedisable);
          this.removestep = 2;
        } else if (this.removestep == 2) {
          const newfilter = this.nowschoolclass.studentlist.filter(item => item.checked == true);
          const idArray = [];
          for (let i = 0; i < newfilter.length; i++) {
            idArray.push(newfilter[i].id);
          }
          //老的学生列表
          let oldarr = this.nowschoolclass.classStudent.split(",")
          //新的学生列表
          let newSelectArray = oldarr.filter((item1) => !idArray.some((item2) => item1 == item2));
          // console.log(newSelectArray);
          this.formupdateSchoolclass.id = this.nowschoolclass.id;
          this.formupdateSchoolclass.classStudent = newSelectArray.join(',');
          updateSchoolclass(this.formupdateSchoolclass).then(response => {
            this.$modal.msgSuccess("删除成功");

            getSchoolclass(this.formupdateSchoolclass.id).then(response => {
              this.nowschoolclass = response.data;
              this.checkboxshow = false;
              this.removestep = 1;
              console.log(this.nowschoolclass);
            });
          });
        }




      },
      GetStudent(index, item) {

        if (false) {
          console.log(item);
          var url = "/student/student";
          this.$router.push({
            path: url,
            query: {
              userName: item.userName,

            }
          })
        }


      },
      GetNumber(item) {
        console.log(item.classStudent);
        if (item.classStudent != null && item.classStudent != '') {

          let arr = item.classStudent.split(",");
          return arr.length;
        } else {
          return 0;
        }



      },
      changclassAskforleave(valueboolen) {
        // console.log(valueboolen);
        this.formschoolclass.classNoyet = null;
        this.formschoolclass.classAskforleave = valueboolen;
        this.formschoolclass.deptId = this.$store.state.user.deptId;
        updateSchoolclass(this.formschoolclass).then(response => {
          this.$modal.msgSuccess("修改成功");

        });
      },
      changclassclassNoyet(valueboolen) {
        console.log(valueboolen);
        this.formschoolclass.classNoyet = valueboolen;
        this.formschoolclass.classAskforleave = null;
        this.formschoolclass.deptId = this.$store.state.user.deptId;
        updateSchoolclass(this.formschoolclass).then(response => {
          this.$modal.msgSuccess("修改成功");

        });
      },

      getSchedulingtablelistCount() {

        this.queryParamsSchedulingtablelist.deptId = this.$store.state.user.deptId;
        schedulingtablelist(this.queryParamsSchedulingtablelist).then(response => {
          // console.log(response);
          if (response.code == 200) {
            this.getschedulingtablelist = response.rows;
          }



        });
      },



      my_date(v) {


        let len = this.getschedulingtablelist.length
        var res = ""
        for (let i = 0; i < len; i++) {
          if (this.getschedulingtablelist[i].date == v) {
            var res = this.getschedulingtablelist[i].content;

            if (res == 0) {
              res = ""
            } else {
              res = res + "节课"
            }

            break
          }
        }
        return res
      },

      startnow() {
        var result_number = this.calculateDaysBetween(this.formatDate(this.calendardata), this.formatDate(new Date()));
        // console.log(result_number);
        if (result_number == 0) {
          this.result_numberall = "今天"
        } else {
          if (this.formatDate(this.calendardata) > this.formatDate(new Date())) {
            result_number = result_number + "天后";
          } else {
            // console.log("前");
            result_number = result_number + "天前";
          }
          this.result_numberall = result_number
        }


        var WeekDay = this.getWeekDay(this.formatDate(this.calendardata));
        this.week_day = WeekDay;
        var month = this.formatDate3(this.calendardata);
        this.now_month = month;
      },

      getWeekDay(date) {
        if (typeof date === 'string') {
          date = date.replace(/-/g, '/')
        }

        const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        const myDate = new Date(Date.parse(date));
        return weekDay[myDate.getDay()];
      },

      formatDate(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}-${month}-${day} `;
      },
      formatDate2(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}年${month}月${day}日 `;
      },
      formatDate3(date) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);

        return `${year}年${month}月  `;
      },
      getSchedulingList() {

        this.loading = true;
        // console.log(this.formatDate(this.calendardata));
        this.queryParamsScheduling.studyDate = this.formatDate(this.calendardata);
        this.queryParamsScheduling.deptId = this.$store.state.user.deptId;
        listScheduling(this.queryParamsScheduling).then(response => {
          this.schedulingList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      handleChange() {

      },
      /** 查询课程管理列表 */
      getCourseList() {
        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        listCourse_And_Class(this.queryParamsCourse).then(response => {
          this.courseList = response.rows;

          this.rightshow = false;
          // console.log(this.courseList);
          var n = Array.from(this.courseList, ({
            courseName
          }) => courseName);

          this.activeNames = n


        });
      },
      //添加学员
      AddStudentList() {
        // console.log("走了");
        this.formupdateSchoolclass.id = this.nowschoolclass.id;
        this.$refs.StudentlistDrawer.openstudentlist(this.nowschoolclass.classCourse, this.nowschoolclass.id);

      },
      ChangeSchedulingDrawer() {

        this.$refs.ChangeSchedulingDrawer.openscheduling(this.nowschoolclass.id);

      },



      AddSchoolclassDrawerSucccess() {

        this.getCourseList();
      },
      GetMessage(index, item) {

        this.selectedIndex = item.id;
        this.formschoolclass.id = item.id;
        this.rightshow = true;
        getSchoolclass(item.id).then(response => {
          this.nowschoolclass = response.data;

          // console.log(this.nowschoolclass);
        });
        this.queryParamsSchedulingtablelist.classCourse = item.classCourse;
        this.queryParamsSchedulingtablelist.className = item.className;


        this.getSchedulingtablelistCount();
        this.queryParamsScheduling.classCourse = item.classCourse;
        this.queryParamsScheduling.className = item.className;

        this.getSchedulingList();

      },
      add() {
        this.$refs.SchoolclassDrawer.open();
      },
      tonow() {

      },
      //新增排课
      addscheduling() {
        this.$refs.SchedulingDrawer.open(this.nowschoolclass.classCourse, this.nowschoolclass.className);
      },
      adjustscheduling() {

        // /scheduling/changescheduling
        this.$router.push({
          path: "/scheduling/changescheduling",
          // query:{
          //   id:row.id,
          //   form:JSON.stringify(this.form)
          // }
        })

      },

      // 取消按钮
      cancel() {
        // this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          deptId: null,
          className: null,
          classCourse: null,
          classCapacity: null,
          classAskforleave: null,
          classNoyet: null,
          classWorkOut: null,
          classCirculate: null,
          classStart: null,
          classFinish: null,
          classHours: null,
          classTeacher: null,
          classAttendant: null,
          classRoom: null,
          classStudent: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },
      fold() {

      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getCourseList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        // this.open = true;
        this.title = "添加班级";
        this.form.deptId = this.$store.state.user.deptId;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getSchoolclass(id).then(response => {
          this.form = response.data;
          // this.open = true;
          this.title = "修改班级";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateSchoolclass(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                // this.open = false;
                this.getCourseList();
              });
            } else {
              addSchoolclass(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                // this.open = false;
                this.getCourseList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(id) {
        const ids = id;
        this.$modal.confirm('是否确认删除班级编号为"' + ids + '"的数据项？').then(function() {
          return delSchoolclass(ids);
        }).then(() => {
          this.getCourseList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('schoolclass/schoolclass/export', {
          ...this.queryParams
        }, `schoolclass_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .contentright {
    width: 100%;

    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    width: 100%;
    // flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }



  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }

  .wrapper {
    // width: 300px;
    height: 700px;
    overflow: auto;
    /* 滚动条设置 */
    // margin: 20px;
    // border: 1px solid #ccc;
    // padding: 10px;
  }

  .itemleftnow {
    width: 100%;
    // flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }
</style>
